<template>
  <a-form
    @submit="handleSubmit"
    :form="form"
    :labelCol="labelCol"
    :wrapperCol="wrapperCol"
  >
    <a-form-item label="用户名">
      <a-input
        v-decorator="['username', decoratorOptions.username]"
        placeholder="用户名"
      />
    </a-form-item>

    <a-form-item style="display: none">
      <a-input v-decorator="['id']" />
    </a-form-item>

    <a-form-item label="昵称">
      <a-input
        v-decorator="['realName', decoratorOptions.realName]"
        placeholder="昵称"
      />
    </a-form-item>

    <a-form-item label="组织部门">
      <a-tree-select
        v-decorator="['organizationId']"
        placeholder="父级组织"
        style="width: 100%"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        :tree-data="organizationTree"
        tree-default-expand-all
        allow-clear
        :replaceFields="{
          title: 'name',
          key: 'id',
          value: 'id',
        }"
      >
      </a-tree-select>
    </a-form-item>

    <a-form-item label="电话">
      <a-input
        v-decorator="['linkPhone', decoratorOptions.linkPhone]"
        placeholder="电话"
      />
    </a-form-item>

    <a-form-item label="性别">
      <a-radio-group v-decorator="['gender', decoratorOptions.gender]">
        <a-radio :value="1">男</a-radio>
        <a-radio :value="0">女</a-radio>
      </a-radio-group>
    </a-form-item>

    <a-form-item label="状态">
      <a-radio-group v-decorator="['status', decoratorOptions.status]">
        <a-radio :value="0">开启</a-radio>
        <a-radio :value="1">关闭</a-radio>
      </a-radio-group>
    </a-form-item>

    <a-form-item :wrapperCol="{ offset: 7 }">
      <a-button htmlType="submit" type="primary" :loading="submitLoading"
        >提交</a-button
      >
      <a-button style="margin-left: 8px" @click="backToPage"
        >取消</a-button
      >
    </a-form-item>
  </a-form>
</template>

<script>
import formMinxins from "./formMinxins";
import md5 from "js-md5";
const defaultValue = {
  gender: 1,
  status: 1,
};

export default {
  name: "FormPage",
  mixins: [formMinxins],
  data() {
    return {
      decoratorOptions: {
        username: {
          rules: [{ required: true, message: "请输入用户名!" }],
        },
        realName: {
          rules: [{ required: true, message: "请输入昵称!" }],
        },
        gender: {
          initialValue: defaultValue.gender,
        },
        status: {
          initialValue: defaultValue.status,
        },
        id: {}
      },
    };
  },
  methods: {
    // 密码加密提交
    /* submitDataProcess(data) {
      data.password = md5(data.password);
      return data;
    }, */
    // 返回
    backToPage() {
      this.form = this.$form.createForm(this);
      this.$emit("backToPage");
    },
    // 提交
    handleSubmit(e) {
      // 阻止 submit 事件的默认行为
      e && e.preventDefault();
      // 表单校验，成功则进行提交
      this.form.validateFields((err, values) => {
        if (!err) {
          let data = {...values}
          // 加密用户密码
          if (!values.id) {
            // 新增用户&移动端注册区分
            data.userType = 0
          }
          this.submitLoading = true;
          // 请求编辑/新增接口
          this.$http("/rapid/user/saveOrUpdate", data).then((res) => {
            this.submitLoading = false;
            if (res.code === 200) {
              this.backToPage();
            } else {
              this.$message.error(String(res.message));
            }
          });
        }
      });
    },
  },
};
</script>
